<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/6/15
  Time: 13:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园论坛 - 发布新帖</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        food: '#F59E0B',
                        sports: '#EF4444',
                        study: '#3B82F6',
                        campus: '#8B5CF6',
                        neutral: '#F8FAFC',
                        'neutral-dark': '#1E293B',
                        'neutral-light': '#F1F5F9',
                        'primary-light': '#E8F0FF',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

   <link rel="stylesheet" href="css/forum_post_create.css">
</head>

<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
<!-- 导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4">
        <nav class="navbar navbar-expand-lg navbar-light">
            <!-- Logo -->
            <a class="navbar-brand flex items-center gap-2" href="#">
                <div class="bg-primary text-white p-2 rounded-lg">
                    <i class="fa fa-university text-xl"></i>
                </div>
                <span class="text-xl font-bold text-primary">校园<span class="text-secondary">论坛</span></span>
            </a>

            <!-- 移动端菜单按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- 导航菜单 -->
            <div class="collapse navbar-collapse justify-between" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">美食天地</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">运动健身</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">学习交流</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">校园趣事</a>
                    </li>
                </ul>

                <div class="flex items-center gap-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden md:block">
                        <input type="text" placeholder="搜索帖子、用户..." class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/50 w-64 transition-all duration-300 focus:w-80">
                        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <!-- 通知图标 -->
                    <div class="relative">
                        <button class="text-gray-600 hover:text-primary transition-colors">
                            <i class="fa fa-bell-o text-xl"></i>
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <!-- 用户头像 -->
                    <div class="relative">
                        <button class="flex items-center gap-2" id="userMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                            <span class="hidden md:inline font-medium">李同学</span>
                            <i class="fa fa-angle-down text-gray-500"></i>
                        </button>

                        <!-- 用户下拉菜单 -->
                        <ul class="dropdown-menu dropdown-menu-end mt-2 shadow-lg rounded-lg border-0 p-0" aria-labelledby="userMenuButton">
                            <li><a class="dropdown-item py-3 px-4 hover:bg-primary-light hover:text-primary flex items-center gap-3" href="#"><i class="fa fa-user-o w-5 text-center"></i> 个人主页</a></li>
                            <li><a class="dropdown-item py-3 px-4 hover:bg-primary-light hover:text-primary flex items-center gap-3" href="#"><i class="fa fa-bookmark-o w-5 text-center"></i> 我的收藏</a></li>
                            <li><a class="dropdown-item py-3 px-4 hover:bg-primary-light hover:text-primary flex items-center gap-3" href="#"><i class="fa fa-cog w-5 text-center"></i> 设置</a></li>
                            <li><hr class="dropdown-divider m-0"></li>
                            <li><a class="dropdown-item py-3 px-4 text-red-500 hover:bg-red-50 flex items-center gap-3" href="#"><i class="fa fa-sign-out w-5 text-center"></i> 退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-6 md:py-8">
    <!-- 面包屑导航 -->
    <div class="mb-6 text-sm text-gray-500">
        <a href="#" class="hover:text-primary">首页</a>
        <span class="mx-2">/</span>
        <a href="#" class="hover:text-primary">发布新帖</a>
    </div>

    <!-- 帖子发布表单 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6 card-shadow">
        <div class="p-6">
            <h2 class="font-bold text-2xl mb-6">发布新帖</h2>

            <form id="postForm" enctype="multipart/form-data" action="${pageContext.request.contextPath}/uploadPost" method="POST">
                <!-- 帖子板块选择 -->
                <div class="mb-6">
                    <label class="block text-gray-700 font-medium mb-2">选择板块</label>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <button type="button" class="category-btn p-4 rounded-lg border-2 border-gray-200 hover:border-food hover:bg-food/5 transition-colors" data-category="food">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 bg-food/10 rounded-full flex items-center justify-center mb-2">
                                    <i class="fa fa-cutlery text-2xl text-food"></i>
                                </div>
                                <span class="font-medium">美食天地</span>
                            </div>
                        </button>

                        <button type="button" class="category-btn p-4 rounded-lg border-2 border-gray-200 hover:border-sports hover:bg-sports/5 transition-colors" data-category="sports">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 bg-sports/10 rounded-full flex items-center justify-center mb-2">
                                    <i class="fa fa-futbol-o text-2xl text-sports"></i>
                                </div>
                                <span class="font-medium">运动健身</span>
                            </div>
                        </button>

                        <button type="button" class="category-btn p-4 rounded-lg border-2 border-gray-200 hover:border-study hover:bg-study/5 transition-colors" data-category="study">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 bg-study/10 rounded-full flex items-center justify-center mb-2">
                                    <i class="fa fa-book text-2xl text-study"></i>
                                </div>
                                <span class="font-medium">学习交流</span>
                            </div>
                        </button>

                        <button type="button" class="category-btn p-4 rounded-lg border-2 border-gray-200 hover:border-campus hover:bg-campus/5 transition-colors" data-category="campus">
                            <div class="flex flex-col items-center">
                                <div class="w-12 h-12 bg-campus/10 rounded-full flex items-center justify-center mb-2">
                                    <i class="fa fa-smile-o text-2xl text-campus"></i>
                                </div>
                                <span class="font-medium">校园趣事</span>
                            </div>
                        </button>
                    </div>
                    <input type="hidden" id="postCategory" name="category">
                </div>

                <!-- 帖子标题 -->
                <div class="mb-6">
                    <label for="postTitle" class="block text-gray-700 font-medium mb-2">帖子标题</label>
                    <input type="text" id="postTitle" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="请输入帖子标题">
                </div>

                <!-- 帖子内容 -->
                <div class="mb-6">
                    <label for="postContent" class="block text-gray-700 font-medium mb-2">帖子内容</label>

                    <!-- 富文本编辑器工具栏 -->
                    <div class="bg-gray-50 border border-gray-200 rounded-t-lg p-2 flex flex-wrap gap-1">
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="粗体">
                            <i class="fa fa-bold"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="斜体">
                            <i class="fa fa-italic"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="下划线">
                            <i class="fa fa-underline"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="删除线">
                            <i class="fa fa-strikethrough"></i>
                        </button>
                        <span class="h-6 w-px bg-gray-300 mx-1"></span>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="标题">
                            <i class="fa fa-header"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="列表">
                            <i class="fa fa-list-ul"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="有序列表">
                            <i class="fa fa-list-ol"></i>
                        </button>
                        <span class="h-6 w-px bg-gray-300 mx-1"></span>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="链接">
                            <i class="fa fa-link"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="图片">
                            <i class="fa fa-image"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="代码">
                            <i class="fa fa-code"></i>
                        </button>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="引用">
                            <i class="fa fa-quote-left"></i>
                        </button>
                        <span class="h-6 w-px bg-gray-300 mx-1"></span>
                        <button type="button" class="p-2 hover:bg-gray-200 rounded" title="预览">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>

                    <!-- 富文本编辑器内容区 -->
                    <div class="border border-t-0 border-gray-200 rounded-b-lg">
                        <textarea id="postContent" rows="15" class="w-full px-4 py-3 focus:outline-none resize-none" placeholder="请输入帖子内容..."></textarea>
                    </div>
                </div>

                <!-- 上传图片 -->
                <div class="mb-6">
                    <label class="block text-gray-700 font-medium mb-2">上传图片（可选）</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-colors" id="uploadArea">
                        <input type="file" id="fileInput" name="fileInput" accept="image/*" class="hidden" multiple>
                        <div class="mb-4" id="uploadIcon">
                            <i class="fa fa-image text-4xl text-gray-400"></i>
                        </div>
                        <p class="text-gray-500 mb-4">拖放图片到此处，或点击选择文件</p>
                        <p class="text-gray-400 text-sm mb-4">支持JPG、PNG格式，单个文件不超过5MB</p>
                        <button type="button" id="selectImageBtn" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors">
                            选择图片
                        </button>
                        <div id="imagePreview" class="mt-4 grid grid-cols-3 gap-2 hidden"></div>
                    </div>
                </div>

                <!-- 发布选项 -->
                <div class="mb-6 flex flex-wrap gap-4">
                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="allowComment" class="w-4 h-4 text-primary focus:ring-primary rounded" checked>
                        <label for="allowComment" class="text-gray-700">允许评论</label>
                    </div>
                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="anonymous" class="w-4 h-4 text-primary focus:ring-primary rounded">
                        <label for="anonymous" class="text-gray-700">匿名发布</label>
                    </div>
                </div>

                <!-- 按钮组 -->
                <div class="flex flex-wrap gap-4 justify-end">
                    <button type="button" class="px-6 py-3 border border-gray-300 rounded-full hover:bg-gray-50 transition-colors">
                        保存草稿
                    </button>
                    <button type="button" class="px-6 py-3 border border-gray-300 rounded-full hover:bg-gray-50 transition-colors">
                        预览帖子
                    </button>
                    <button type="submit" class="px-6 py-3 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors">
                        发布帖子
                    </button>
                </div>
            </form>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <div class="bg-primary text-white p-2 rounded-lg">
                        <i class="fa fa-university text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-primary">校园<span class="text-secondary">论坛</span></span>
                </div>
                <p class="text-gray-500 text-sm mb-4">校园生活交流平台，分享你的校园点滴。</p>
                <div class="flex gap-3">
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-qq"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="font-bold mb-4">热门板块</h4>
                <ul class="space-y-2 text-sm">
                    <li><a href="#" class="text-gray-500 hover:text-food transition-colors">美食天地</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-sports transition-colors">运动健身</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-study transition-colors">学习交流</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-campus transition-colors">校园趣事</a></li>
                </ul>
            </div>

            <div>
                <h4 class="font-bold mb-4">帮助中心</h4>
                <ul class="space-y-2 text-sm">
                    <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">论坛规则</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">常见问题</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">举报投诉</a></li>
                    <li><a href="#" class="text-gray-500 hover:text-primary transition-colors">建议反馈</a></li>
                </ul>
            </div>

            <div>
                <h4 class="font-bold mb-4">联系我们</h4>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-center gap-2">
                        <i class="fa fa-envelope-o text-primary"></i>
                        <a href="mailto:support@campusforum.com" class="text-gray-500 hover:text-primary transition-colors">support@campusforum.com</a>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fa fa-phone text-primary"></i>
                        <span class="text-gray-500">010-87654321</span>
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fa fa-map-marker text-primary"></i>
                        <span class="text-gray-500">北京市海淀区学院路1号</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-gray-200 mt-8 pt-6 text-center text-gray-500 text-sm">
            <p>© 2025 校园论坛. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- 回到顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
    <i class="fa fa-arrow-up"></i>
</button>

<!-- JavaScript -->
<script src="js/forum_post_create.js"></script>
</body>
</html>
